<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
        font-family: "Times New Roman", Times, serif;
        }

        .p2 {
        font-family: Arial, Helvetica, sans-serif;
        }

        .p3 {
        font-family: "Lucida Console", "Courier New", monospace;
        }
        /* 正常显示 */
        p.normal{
            font-style: normal;
        }
        /* 斜体显示 */
        p.italic{
            font-style: italic;
        }
        /* 倾斜显示 */
        p.oblique{
            font-style: oblique;
        }
        /* 正常 */
        p.normal {
        font-weight: normal;
        }
        p.light {
        font-weight: lighter;
        }
        p.thick {
        font-weight: bold;
        }
        p.thicker {
        font-weight: 900;
        }

        p.normal1 {
        font-variant: normal;
        }

        p.small1 {
        font-variant: small-caps;
        }
    </style>
</head>
<body>
    <h1>CSS font-family</h1>
    <p>这是一个段落，以 Times New Roman 字体显示：</p>
    <p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
    <p>这是一个段落，以 Arial 字体显示：</p>
    <p class="p2">This is a paragraph, shown in the Arial font.</p>
    <p>这是一个段落，以 Lucida Console 字体显示：</p>
    <p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
    <p class="normal">This is a paragraph in normal style.</p>
    <p class="italic">This is a paragraph in italic style.</p>
    <p class="oblique">This is a paragraph in oblique style.</p>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
    <p class="normal1">My name is Bill Gates.</p>
    <p class="small1">My name is Bill Gates.</p>
</body>
</html>